<template>
  <div>
    <!-- 搜索栏 -->
    <el-form :inline="true" :model="search" class="demo-form-inline">
      <el-form-item label="关键字">
        <el-input v-model="search.keyWords" placeholder="关键字"></el-input>
      </el-form-item>
      <el-form-item label="开始日期">
        <el-date-picker
          value-format="yyyy-MM-DD"
          v-model="search.start"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期">
        <el-date-picker
          value-format="yyyy-MM-DD"
          v-model="search.end"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- /搜索栏 -->
    <div style="margin-bottom: 15px">
      <el-button @click="showCateAddModal" type="success">增加分类</el-button>
    </div>
    <!-- 商品分类列表 -->
    <el-table
      :data="cates"
      :height="400"
      style="width: 100%">
      <el-table-column
        prop="cateName"
        label="分类名称">
      </el-table-column>
      <el-table-column
        prop="enAbled"
        label="是否启动">
        <template slot-scope="scope">
          <el-switch :value="scope.row.enAbled?true:false"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="cateIcon"
        label="分类图标">
        <template slot-scope="scope">
          <img :src="scope.row.cateIcon" width="100"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="createAt"
        label="创建时间">
        <template slot-scope="scope">
          {{ dayjs(scope.row.createAt).format('YYYY-MM-DD') }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button @click="delCate(scope.row.id)" type="danger">删除</el-button>
          <el-button type="primary" @click="clickCateUpdate(scope.row.id)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- /商品分类列表 -->
    <!-- 分页组件 -->
    <el-pagination
      :page-size="pageSize"
      layout="prev, pager, next, sizes, jumper, ->, total"
      @size-change="sizeChange"
      @current-change="pageChange"
      :total="total">
    </el-pagination>
    <!-- /分页组件 -->
    <!-- 增加分类弹窗 -->
    <el-drawer
      title="增加分类"
      modal
      :visible.sync="cateAddShow"
      direction="rtl"
      >
      <cate-add :cates="allCates"/>
    </el-drawer>
    <!-- /增加分类弹窗 -->
    <!-- 修改分类弹窗 -->
    <el-drawer
      title="修改分类"
      modal
      :visible.sync="cateUpdateShow"
      direction="rtl"
      >
      <cate-update :cates="allCates" :cateDetail="cateDetail"/>
    </el-drawer>
    <!-- /修改分类弹窗 -->
  </div>
</template>

<script>
import { fetchCateLists, fetchCateDetail, delCate } from '_api'
import * as dayjs from 'dayjs'
import CateAdd from './components/CateAdd.vue'
import CateUpdate from './components/CateUpdate.vue'

export default {
  name: 'CateLists',
  data () {
    return {
      search: {
        keyWords: '',
        start: '', // 开始事件
        end: '' // 结束时间
      },
      cates: [],
      allCates: [], // 所有分类数组 传入 增加和修改分类使用
      page: 1,
      pageSize: 10,
      total: 0,
      // 增加商品分类弹窗状态 true显示 false隐藏
      cateAddShow: false,
      // 修改商品分类弹窗状态 true显示 false隐藏
      cateUpdateShow: false,
      // 商品分类详情
      cateDetail: {}
    }
  },
  methods: {
    delCate (id) {
      // 删除分类
      // 弹出确认框确认后删除
      this.$confirm('此操作会彻底删除该分类，确定继续吗?', '删除').then(() => {
        delCate(id).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.msg,
              duration: 1500,
              onClose: () => {
                this.$router.go(0)
              }
            })
          } else {
            this.$message({
              type: 'error',
              message: res.data.msg,
              duration: 1500

            })
          }
        })
      })
    },
    clickCateUpdate (id) {
      // 根据id 获取 修改商品分类的 详情数据 并传递给 修改商品 组件
      fetchCateDetail(id).then(res => {
        if (res.data.code === 200) {
          this.cateDetail = {
            ...res.data.data
          }
          this.cateUpdateShow = true
        }
      })
    },
    showCateAddModal () {
      // 显示增加商品分类弹窗
      this.cateAddShow = true
    },
    dayjs,
    pageChange (page) {
      // 分页组件改变 当前页
      this.page = page
      this.fetchCateLists()
    },
    sizeChange (pageSize) {
      this.pageSize = pageSize
      this.fetchCateLists()
      // 分页组件改变一页多少条
    },
    // 请求商品分类列表数据
    fetchCateLists () {
      fetchCateLists({
        ...this.search,
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        if (res.data.code === 200) {
          this.cates = res.data.data.list
          this.total = res.data.data.total
        }
      })
    },
    // 获取所有分类 传递给增加和修改商品作为父级分类选择使用
    fetchAllCateLists () {
      fetchCateLists().then(res => {
        if (res.data.code === 200) {
          this.allCates = res.data.data.list
        }
      })
    },
    onSearch () {
      // 查询事件
      this.fetchCateLists()
      this.fetchAllCateLists()
    }
  },
  created () {
    this.fetchCateLists()
    this.fetchAllCateLists()
  },
  components: {
    CateAdd,
    CateUpdate
  }
}
</script>

<style lang="scss" scoped>

</style>
